<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>实例：事件绑定</title>
</head>
<body>
	<div id="demo">Hello World!</div>
	<div id="btn">内容</div>

	<script type="text/javascript">
		// 例1：普通方式
		var bindEvent = function(dom, type, fn) {
			if (dom.addEventListener) {
				dom.addEventListener(type, fn, false);
			} else if (dom.attachEvent) {
				dom.attachEvent('on' + type, fn);
			} else {
				dom['on' + type] = fn;
			}
		}
		var demo = document.getElementById('demo');
		bindEvent(demo, 'click', function(e) {
			// IE报错：IE低版本(IE6/7/8)this指向window
			// 替换方案：var _this = e.srcElement || e.target;
			this.style.background = 'red';
		});

		// 例2：IE访问操作元素
		// var bindIEEvent = function(dom, type, fn, data) {
		// 	var data = data || {};
		// 	dom.attachEvent('on' + type, function(e) {
		// 		// 通过call强制改变this指向
		// 		fn.call(dom, e, data);
		// 	});
		// }
		// function $(id) {
		// 	return document.getElementById(id);
		// }
		// bindIEEvent($('btn'), 'click', function(e, data) {
		// 	$('demo').innerHTML = e.type + data.text + this.tagName;
		// }, {text: 'test demo'})
	</script>
</body>
</html>